<template>
  <div class="paymentok">
    <div class="paymentok_top">
      <div class="top_left">
        <img src="../../../public/left.gif" alt="" @click="handleClick()" />
      </div>
      <div class="top_title">支付</div>
      <div class="paymentok_bottom">
        <img src="../../../public/ok.gif" alt="" class="bottom_img" />
        <div class="bottom_oktitle">支付成功</div>
        <div class="bottom_onetext">
          <p class="onetext_p1">订单编号</p>
          <p class="onetext_p2">{{ this.timestamp }}</p>
        </div>
        <div class="bottom_twotext">
          <p class="twotext_p1">订单金额</p>
          <p class="twotext_p2">{{ this.freight }}元</p>
        </div>
        <div class="bottom_threetext">
          <p class="threetext_p1">支付方式</p>
          <p class="threetext_p2">{{ this.text }}</p>
        </div>
        <div class="bottom_forutext">
          <p class="forutext_p1">支付时间</p>
          <p class="forutext_p2">{{ this.Time }}</p>
        </div>
        <div class="bottom_goone">
          <p class="goone_p" @click="handleClickone()">进入我的订单</p>
        </div>
        <div class="bottom_gotwo">
          <p class="gotwo_p" @click="handleClicktwo()">继续逛逛</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.freight = this.$route.query.freight;
    this.text = this.$route.query.text;
    this.timestamp = Date.parse(new Date());

    // const nowDate = new Date();
    // const date = {
    //   year: nowDate.getFullYear(),
    //   month: nowDate.getMonth() + 1,
    //   date: nowDate.getDate(),
    // };
    // const newmonth = date.month > 10 ? date.month : "0" + date.month;
    // const day = date.date > 10 ? date.date : "0" + date.date;
    // this.Time = date.year + "-" + newmonth + "-" + day;
    let _this = this;
    let yy = new Date().getFullYear();
    let mm =
      new Date().getMonth() + 1 < 10
        ? "0" + (new Date().getMonth() + 1)
        : new Date().getMonth() + 1;
    let dd =
      new Date().getDate() < 10
        ? "0" + new Date().getDate()
        : new Date().getDate();
    let hh =
      new Date().getHours() < 10
        ? "0" + new Date().getHours()
        : new Date().getHours();
    let mf =
      new Date().getMinutes() < 10
        ? "0" + new Date().getMinutes()
        : new Date().getMinutes();
    _this.Time = yy + "-" + mm + "-" + dd + "       " + hh + ":" + mf;
  },
  data() {
    return {
      freight: 0,
      text: "",
      timestamp: "",
      Time: "",
    };
  },
  methods: {
    handleClick() {
      this.$router.push({ path: "/layout/home" });
    },
    handleClickone() {
      this.$router.push({ path: "/layout/home" });
    },
    handleClicktwo() {
      this.$router.push({ path: "/layout/home" });
    },
  },
};
</script>

<style lang="scss" scoped>
.paymentok {
  width: 100%;
  height: 100%;
}
.paymentok_top {
  width: 100%;
  height: 50px;
  position: relative;
  background: #4483ec;
  box-shadow: 0px 0px 10px #000;
}
.top_title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.paymentok_bottom {
  width: 100%;
  height: 500px;
  margin-top: 50px;
  position: relative;
}
.bottom_img {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, -50%);
}
.bottom_oktitle {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
}
.bottom_onetext {
  width: 100%;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 25%;
  line-height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
}
.onetext_p1 {
  width: 220px;
  height: 50px;
  color: #9a9a9a;
  margin-left: 20px;
}
.onetext_p2 {
  height: 50px;
  color: #9a9a9a;
}
.twotext_p1 {
  width: 280px;
  height: 50px;
  color: #9a9a9a;
  margin-left: 20px;
}
.twotext_p2 {
  height: 50px;
  color: #9a9a9a;
}
.threetext_p1 {
  width: 280px;
  height: 50px;
  color: #9a9a9a;
  margin-left: 20px;
}
.threetext_p2 {
  height: 50px;
  color: #9a9a9a;
}
.forutext_p1 {
  width: 204px;
  height: 50px;
  color: #9a9a9a;
  margin-left: 20px;
}
.forutext_p2 {
  height: 50px;
  color: #9a9a9a;
}
.bottom_twotext {
  width: 100%;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 35%;
  line-height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
}
.bottom_threetext {
  width: 100%;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 45%;
  line-height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
}
.bottom_forutext {
  width: 100%;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 55%;
  line-height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
}
.bottom_goone {
  width: 30%;
  height: 50px;
  position: absolute;
  left: 28%;
  top: 75%;
  line-height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
}
.bottom_gotwo {
  width: 30%;
  height: 50px;
  position: absolute;
  left: 75%;
  top: 75%;
  line-height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
}
.goone_p {
  width: 120px;
  height: 34px;
  line-height: 34px;
  color: #138bec;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #138bec;
}
.gotwo_p {
  width: 120px;
  height: 34px;
  line-height: 34px;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  background: #138bec;
}
</style>